<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>书籍表单</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:25px; ">
        <input type="text" id="id" style="display: none; "/>
        <div class="layui-inline">
            <label class="layui-form-label" >书名</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="bookName" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >作者</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="bookAuthor" autocomplete="off" class="layui-input" />
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:15px; ">
        <div class="layui-inline">
            <label class="layui-form-label" >出版社</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="bookPublisher" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >售价</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="bookValue" autocomplete="off" class="layui-input" />
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:15px; ">
        <div class="layui-inline">
            <label class="layui-form-label" >余量</label>
            <div class="layui-input-inline" style="width:220px; ">
                <input type="text" id="bookNumber" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >类别</label>
            <div class="layui-input-inline" style="width:220px; ">
                <select lay-filter="bookKind" id="bookKind">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea style="width: 85%; " placeholder="请输入书籍简介" class="layui-textarea" id="bookIntroduce"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top:15px; margin-left: 110px; ">
        <div class="layui-upload-drag" id="bookImg" style="width: 76%; ">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <img src="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline" style="margin-left: 350px; ">
                <button type="button" class="layui-btn" lay-submit="" onclick="submitForm()">保存</button>
            </div>
        </div>
    </div>
</form>

<script src="/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['element','form','layer','upload'], function(){
        let element = layui.element;
        let form = layui.form;
        let layer = layui.layer;
        let upload = layui.upload;

        let img = null;

        $(function(){
            setTimeout(function(){
                //先给下拉框赋值
                $.ajax({
                    type: "POST",
                    url: '/manager/getKindData',
                    data: JSON.stringify({}),
                    contentType: "application/json",
                    success: function (data) {
                        let d = data["data"];
                        $(d).each(function(){
                            $("#bookKind").append("<option value='"+this['id']+"'>"+this['kindName']+"</option>")
                        });
                        //更新渲染
                        form.render();
                        //再进行回显
                        let id = $('#id').val();
                        if(id != null && id !== ''){
                            $.ajax({
                                type: "POST",
                                url: '/manager/getBookById?id=' + id,
                                contentType: "application/json",
                                success: function (data) {
                                    let obj = JSON.parse(data);
                                    $('#bookName').val(obj['bookName']);
                                    $('#bookAuthor').val(obj['bookAuthor']);
                                    $('#bookPublisher').val(obj['bookPublisher']);
                                    $('#bookValue').val(obj['bookValue']);
                                    $('#bookNumber').val(obj["bookNumber"]);
                                    $('#bookIntroduce').val(obj["bookIntroduce"]);
                                    $('#bookKind').val(obj["bookKind"]);
                                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', obj["bookImg"]);
                                    img = obj["bookImg"];
                                    //更新渲染
                                    form.render();
                                }
                            });
                        }
                    }
                });
            },1*1000);
        });

        //拖拽上传
        upload.render({
            elem: '#bookImg'
            ,url: '/file/imagesUpload' //上传接口
            ,done: function(res){
                layer.msg('上传成功');
                img = res.data;
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.baseData);
            }
        });


        //表单保存提交
        submitForm = function () {
            let obj = {};
            obj["bookName"] = $('#bookName').val();
            obj["bookAuthor"] = $('#bookAuthor').val();
            obj["bookPublisher"] = $('#bookPublisher').val();
            obj["bookValue"] = $("#bookValue").val();
            obj["bookNumber"] = $("#bookNumber").val();
            obj["bookIntroduce"] = $('#bookIntroduce').val();
            obj["bookKind"] = $('#bookKind').val();
            let checkPass = true;
            for(let item in obj){
                if(obj[item] == null || obj[item] === ''){
                    checkPass = false;
                }
            }
            if(checkPass === true){
                let reNumber = /^[0-9]*$/;
                let rePrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
                if(!reNumber.test(obj["bookNumber"])){
                    layer.msg("余量处请输入数字:整数")
                }else if(!rePrice.test(obj["bookValue"])){
                    layer.msg("售价处请输入数字：整数或者保留两位小数")
                }else{
                    obj["id"] = $('#id').val();
                    obj["bookImg"] = img;
                    $.ajax({
                        type: "POST",
                        url: '/manager/saveBook',
                        data: JSON.stringify(obj),
                        contentType: "application/json",
                        success: function (data) {
                            if(data === 'success'){
                                parent.setRefreshFlag(true);
                                let index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }else if(data === 'bookRepeat'){
                                layer.msg("该出版社已有该书籍")
                            }
                        }
                    });
                }
            }else{
                layer.msg('请输入完整信息');
            }
        }



    });
</script>
</body>
</html>